<template>
  <main>
    <div class="top-container">
      <div class="iconBar" >
        <img  src="/src/assets/goodsInfoBack.png" title="点击返回主页。" @click="toPage">
      </div>
    </div>
    <div class="bt-container">
      <div class="left-container">
        <img :src="goodsInfo.url" style="width: 100%;height: 100%">
      </div>
      <div class="right-container">
        <div class="goods-title">
            <h2>{{goodsInfo.info}}</h2>
        </div>
        <div class="goods-price">
          <div class="goods-price-container">
            <h6 style="color: white;">券后 ¥ </h6>
            <h1 style="color: white;">{{goodsInfo.price}}</h1>
            <h6 style="color: white;margin-left: 5px">优惠前 ¥ {{goodsInfo.price + 100654050}}</h6>
          </div>
        </div>
        <div class="goods-salarBack">
          <p class="goods-salarBack-font"><span class="label">配送</span> 3天内发货 快递: 免运费 多仓发货至 宁波 北仑</p>
          <p class="goods-salarBack-font"><span class="label">保障</span> 7天无理由退货极速退款</p>
          <p class="goods-salarBack-font"><span class="label">可选支付</span> 信用卡支付</p>
          <p class="goods-salarBack-font"><span class="label">类型</span> 3天内发货 快递: 免运费 多仓发货至 宁波 北仑</p>
          <p class="goods-salarBack-font"><span class="label">保障服务</span> 选购更多</p>
        </div>
        <div class="goods-number">
          <p class="label">数量</p>
          <div style="display: flex;">
            <a href="#" class="label2" style="border-radius: 20% 0 0 20%" @click="addNum(-1)">-</a>
            <p class="label2" style="width: 50px;border: 0;border-bottom: 2px #bebcbc solid;border-top: 2px #bebcbc solid;">{{goodsInfo.num}}</p>
            <a href="#" class="label2" style="border-radius: 0 20% 20% 0" @click="addNum(1)">+</a>
          </div>
        </div>
        <div class="goods-ok">
          <div class="buyBt" @click="buyGoods">直接购买</div>
          <div class="joinCar" @click="intoCar()">加入购物车</div>
        </div>
      </div>
    </div>

  </main>
</template>

<script setup>
import {reactive, ref} from 'vue';
import { useRoute } from 'vue-router';

import useUserInfoStore from "../stores/user.js";
import { storeToRefs } from "pinia";
import router from "../router/index.js";
const userInfoStore = useUserInfoStore();
const { userInfo, carList} = storeToRefs(userInfoStore);

import { ElMessageBox ,ElMessage} from 'element-plus'

const route = useRoute();  // 获取当前路由对象
  const goodsInfo = reactive(route.query);
  const tmpInfo = reactive({
    id:0,
    userId: "",
    url: "",
    price: "",
    info: "",
    num: "",
    flag:false
  })
  const addNum = (t) => {
    let tmp = parseInt(goodsInfo.num);
    if(tmp == 1 && t == -1)return ;
    goodsInfo.num = tmp + t;
  };
  const intoCar = () => {
    if(!userInfo.value.flag){
      ElMessage({
        message: '您还未登录，请登录！！！',
        type: 'error',
        plain: true,
      })
      router.push("/login");
      return ;
    }

    tmpInfo.id = carList.value.length,

    tmpInfo.userId = userInfo.value.userId,
    tmpInfo.url = goodsInfo.url,
    tmpInfo.price = goodsInfo.price,
    tmpInfo.info = goodsInfo.info,
    tmpInfo.num = parseInt(goodsInfo.num)
    userInfoStore.carList.push({...tmpInfo});
    userInfoStore.userInfo.shopCars.push({...tmpInfo});
    ElMessage({
      message: '加入购物车成功！',
      type: 'success',
      duration: 1200
    })
    // console.log(userInfo.value)
  }
  const buyGoods = () => {
    if(!userInfo.value.flag){
      ElMessage({
        message: '您还未登录，请登录！！！',
        type: 'error',
        plain: true,
      })
      router.push("/login");
      return ;
    }
    ElMessageBox.confirm(
        '确认是否购买？',
        '通知',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    ).then(() => {
      ElMessage({
        type: 'success',
        message: "购买成功！\n一共花费：" + (goodsInfo.num * goodsInfo.price),
      })
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消订单！',
      })
    })
  }
  const toPage  = () => {
    router.push("/");
  }

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  color: #1F1F1F;
  font-family: Arial, sans-serif;
}
main {
  width: 100%;
  min-height: 100vh;
  justify-items: center;
  background-color: white;
  box-sizing: border-box;
}
.top-container{
  height: 80px;
  width: 100%;
  min-width: 1280px;
  display: flex;
  align-content: center;
}
.iconBar{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 20%;
  cursor: pointer;

}

.bt-container {
  display: flex;
  /*background-color: #213547;*/
  justify-content: center;
  margin-top: 10px;
  width: 100%;
  gap: 2%;
}
.left-container {
  /*background-color: #888888;*/
  width: 49%;
  height: 100vh;
  max-height: 600px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  border-radius: 5% ;
  overflow: hidden;
}
.right-container {
  /*background-color: #747bff;*/
  width: 49%;
  height: 100vh;
  max-height: 600px;

}
.goods-title {
  height: 15%;
  align-items: center;
  display: flex;
  font-family: Arial, sans-serif;
}
.goods-price {
  height: 10%;
}
.goods-price-container {
  padding-left: 10px;
  border-radius: 10px;
  background-color: #FF5000;
  display: flex;
  align-items: center;
  height: 100%;
  width: 80%;

}

.goods-salarBack {
  height: 50%;
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
  display: flex;
  flex-direction: column;
  justify-content: center;

}
.goods-salarBack-font{
  width: 100%;
  display: flex;
  margin-bottom: 12px;
  align-items: center;
  font-size: 14px;
  color: #333;
}
.label {
  font-weight: bold;
  width: 70px;
  margin-right: 10px;
  display: flex;
  justify-content: center;

}
.goods-salarBack-font span {
  color: #333;
}

.goods-salarBack-font:last-child {
  margin-bottom: 0;
}

.goods-number {
  height: 10%;
  display: flex;
  align-items: center;
}
.label2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px #bebcbc solid;
  vertical-align: middle;
  font-size: 1.5em;
}
a:hover {
  color: #FF5000;
}
.goods-ok {
  height: 15%;
  width: 100%;
  display: flex;
  align-items: center;
}
.buyBt {
  width: 40%;
  height: 50%;
  background: linear-gradient(45deg, #f8780e, #f74f0e);
  align-items: center;
  justify-content: center;
  display: flex;
  color: white;
  border-radius: 10px 0 0 10px;
  cursor: pointer;

}
.joinCar {
  width: 40%;
  height: 50%;
  background: linear-gradient(45deg, #f9c711, #f79710);
  align-items: center;
  justify-content: center;
  display: flex;
  color: white;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}
</style>